<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>

<style>
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .pagination-container .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 0;
        border-radius: 4px;
    }

    .pagination-container .pagination-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pagination-container .pagination-list li {
        display: inline-block;
    }

    .pagination-container .pagination-list li a {
        color: #337ab7;
        padding: 6px 12px;
        margin: 0 3px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .pagination-container .pagination-list li a:hover {
        background-color: #337ab7;
        color: #fff;
    }

    .pagination-container .pagination-list .active a {
        background-color: #337ab7;
        color: #fff;
    }
    /*.layui-nav-item.layui-this > a {*/
    /*    background-color: white;*/
    /*    color: black !important;*/
    /*    font-size: 16px !important;*/
    /*}*/
    .title {
        font-size: 24px;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
    }
    .welcome-text{
        color:aquamarine;
        margin: 10px 10px 5px  10px;
    }
    .layui-table {
        margin: 0 auto;
        width: 80%;
        border-collapse: collapse;
    }

    .layui-table th,
    .layui-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    .layui-table th {
        background-color: #f2f2f2;
        color: #333;
    }
    .layui-side {
        width: 200px;
    }

    .layui-side-scroll {
        height: calc(100% - 60px);
        overflow: auto;
    }

    .layui-nav-item {
        line-height: 50px;
    }

    .layui-body {
        padding: 20px;
    }

    .headpic{
        height: 100px;
        width: 100px;
        margin:0 50px;
    }
    #editModal {
        z-index: 9999;
    }


</style>


<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">职工后台管理系统</div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div class="logo-wrapper">
                <div class="logo-img">
                    <img class="headpic" th:src="@{/picture/root.png}">
                </div>
                <div class="welcome-text" >
                    <p th:text="'欢迎您,尊贵的'+${session.root.name}+'！'"></p>
                </div>
            </div>
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">员工信息</a>
                    <dl class="layui-nav-child">
                        <dd><a id="nav-manger" th:href="@{/manger}">员工薪酬信息</a></dd>
                        <dd><a id="nav-showdep" th:href="@{/showdep}">员工部门信息</a></dd>
                        <dd><a id="nav-selectEmp" th:href="@{/seletEmp.html}">工号查询</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a id="nav-showuser" th:href="@{/showuser}">用户信息</a>
                </li>
                <li class="layui-nav-item">
                    <a th:href="@{/login.html}">退出</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
<h2>职工信息首页</h2>
        <br/>
        <br/>
        <button class="btn btn-primary"><a th:href="@{'/emp/add'}">新增员工信息</a></button>
        <table class="layui-table">
            <colgroup>
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="120">
                <col width="200">
            </colgroup>
            <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>工作</th>
                <th>直属领导</th>
                <th>入职时间</th>
                <th>薪资</th>
                <th>津贴</th>
                <th>部门编号</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="emp:${session.pageInfo.list}">
                <td th:text="${emp.empno}"></td>
                <td th:text="${emp.ename}"></td>
                <td th:text="${emp.job}"></td>
                <td th:text="${emp.mgr}"></td>
                <td th:text="${emp.hiredata}"></td>
                <td th:text="${emp.sal}"></td>
                <td th:text="${emp.comm}"></td>
                <td th:text="${emp.deptno}"></td>
                <td>
                    <button class="btn btn-success"><a th:href="@{'/emp/updatePage/'+${emp.empno}}">修改</a></button>
                    <button class="btn btn-success"><a th:href="@{'/emp/delete/'+${emp.empno}}">删除</a></button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="ui bottom attached segment">
            <div class="ui middle aligned grid">
                <div class="five wide column"></div>
                <div  class="two wide column" align="center">
                    <a th:href="@{/manger/(pageNum=${session.pageInfo.hasPreviousPage}?${session.pageInfo.prePage}:1)}" th:unless="${session.pageInfo.isFirstPage}">
                    上一页</a>
                </div>

                <div class="two wide column" align="center">
                    <p> <span th:text="${session.pageInfo.pageNum}"></span> / <span th:text="${session.pageInfo.pages}"></span> </p>
                </div>

                <div  class="two wide column" align="center">
                    <a style="=link{color: red} " class="item" th:href="@{/manger/(pageNum=${session.pageInfo.hasNextPage}?${session.pageInfo.nextPage}:${session.pageInfo.pages})}" th:unless="${session.pageInfo.isLastPage}">

                        下一页</a>
                </div>
                <div class="five wide column"></div>
            </div>
        </div>
    </div>







</div>

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
<script>

    layui.use('element', function(){
        var element = layui.element;
        var $=layui.$;
        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        console.log(currentUrl);
        // 根据当前 URL 判断并设置高亮
        if (currentUrl.includes('/manger')) {
            $('#nav-manger').addClass('layui-this');
        } else if (currentUrl.includes('/showdep')) {
            $('#nav-showdep').addClass('layui-this');
        } else if (currentUrl.includes('/seletEmp.html')) {
            $('#nav-selectEmp').addClass('layui-this');
        }else if (currentUrl.includes('/showuser')) {
            $('#nav-showuser').addClass('layui-this');
        }

        element.render('nav', 'test');
    });


</script>
</body>

</html>